<template>
  <div class="bank-card">
    <div>
      <van-nav-bar title="Bank Card" left-arrow @click-left="$router.back()" />
    </div>
    <div class="form">
      <div class="form-item">
        <div class="form-left">
          <div class="icon">Bank card:</div>
        </div>
        <div class="form-right">
          <input type="text" placeholder="Please input" v-model="form.number" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-left">
          <div class="icon">IFSC:</div>
        </div>
        <div class="form-right">
          <input type="text" placeholder="Please input" v-model="form.ifsc" />
        </div>
      </div>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="form-left">
          <div class="icon">Real name:</div>
        </div>
        <div class="form-right">
          <input
            type="text"
            placeholder="Please input"
            v-model="form.username"
          />
        </div>
      </div>
      <div class="form-item">
        <div class="form-left">
          <div class="icon">E-mail:</div>
        </div>
        <div class="form-right">
          <input type="text" placeholder="Please input" v-model="form.email" />
        </div>
      </div>
      <div class="user-name">
        <div class="icon">Phone number:</div>
        <div class="text">
          <input
            type="number"
            v-model="form.phone"
            placeholder="Please input"
          />
        </div>
      </div>
      <div class="user-name">
        <div class="form-left">
          <div class="icon">Verification Code:</div>
        </div>
        <div class="form-right text">
          <input
            placeholder="Code"
            v-model="form.verification_code"
            style="margin-right: 60px; width: 130px"
          />
          <span class="send" @click="setCodeEvent">OTP</span>
        </div>
      </div>
    </div>
    <div class="sub">
      <button @click="determine">Confirm</button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { countDwon } from "@/utils/common";
export default {
  data() {
    return {
      form: {
        phone: "",
        bank_id: "",
        number: "",
        number_confirmation: "",
        username: "",
        verification_code: "",
        verification_key: "",
        email: "",
        province: "",
        city: "",
        address: "",
        ifsc: "",
      },
    };
  },
  computed: {
    checkPhone() {
      return this.form.phone;
    },
  },
  methods: {
    determine() {
      if (this.field()) {
        this.form.number_confirmation = this.form.number;
        var from = Object.assign({}, this.form);
        this.$store.state.my.banks.map((item) => {
          if (item.name == this.form.bank_id) {
            from.bank_id = item.id;
          }
        });
        //  this.$store.state.my.city.map((item)=>{
        //    if(item.name==this.form.province){
        //       this.form.province=item.id
        //    }
        //    if(item.name==this.form.city){
        //      this.form.city=item.id
        //    }
        //  })
        this.$store.dispatch("bindcards", from).then((res) => {
          this.$router.push("/withdrawal");
        });
      }
    },
    setCodeEvent(e) {
      if (this.checkPhone) {
        this.$store
          .dispatch("sendcode", {
            phone: this.form.phone,
            area: "91",
            type: "other",
          })
          .then((res) => {
            this.form.verification_key = res;
            this.$toast("Send successful");
            countDwon(e.target, 60);
          });
      } else {
        this.$toast("Please enter phone number");
      }
    },
    field() {
      if (!this.form.number) {
        Toast("Please input the bank card");
        return false;
      }
      if (!this.form.ifsc) {
        //ifsc
        Toast("Ifsc cannot be empty");
        return false;
      }

      if (!this.form.username) {
        Toast("Name cannot be empty");
        return false;
      }

      if (!this.form.phone) {
        Toast("Phone cannot be empty");
        return false;
      } else {
        // if(!/^1[3456789]\d{9}$/.test(this.form.phone)){
        //   this.$toast("Please enter correct phone number");
        //     return false
        // }
      }

      if (!this.form.verification_code) {
        Toast("verification code cannot be empty");
        return false;
      }

      if (!this.form.email) {
        this.$toast("Email cannot be empty");
        return false;
      } else {
        if (!this.form.email.includes("@")) {
          this.$toast("Illegal email address");
          return false;
        }
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  width: 100%;
  margin: auto;
  margin-top: 15px;
  background-color: #fff;
  .user-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
    font-size: 15px;
    color: #081647;

    .invite {
      font-size: 15px;
      color: #081647;
    }
    .text input {
      font-size: 15px;
      border: none;
      text-align: right;
    }
    .text .tel {
      margin-right: 10px;
      font-size: 15px;
      font-weight: 400;
    }
    .text .send {
      position: absolute;
      right: 20px;
      font-size: 12px;
      color: #4c6cf1;
      padding: 2px 8px;
      background: #e3e7fe;
      border: 1px solid #4c6cf1;
      opacity: 1;
      border-radius: 11px;
    }
  }
  .icon {
    img {
      width: 17px;
      height: 17px;
      margin-right: 10px;
    }
  }
  .form-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    font-size: 15px;
    color: #081647;
    border-bottom: 1px solid #ebebeb;
    .icon img {
      width: 17px;
      height: 17px;
    }
    input {
      width: 155px;
      border: none;
      text-align: right;
    }
  }
}
.sub {
  text-align: center;
  padding: 30px 0;
  button {
    width: 300px;
    height: 50px;
    background: #4a67f5;
    opacity: 1;
    border-radius: 105px;
    color: #fff;
    font-size: 17px;
    border: none;
  }
}
</style>